<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" content="">
  <title>core - transition.transition()</title>
  <style type="text/css">
    div {
      position: relative;
      width: 250px;
      height: 50px;
    }

    .bar {
      left: 0px;
    }
  </style>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
  <div id="colorTest" style="width: 200px;height: 100px;background-color: black;"></div>
  <div class="bar" data-animate-fn="init" data-order="1" menuName="A" style="background-color: cadetblue;top:0;">A</div>
  <div class="bar" data-animate-fn="init" data-order="2" menuName="B" style="background-color: red;top:50;">B</div>
  <div class="bar" data-animate-fn="init" data-order="3" menuName="C" style="background-color: blue;top:100;">C</div>
  <div class="bar" data-animate-fn="init" data-order="4" menuName="D" style="background-color: olivedrab;top:150;">D
  </div>
  <div class="bar" data-animate-fn="init" data-order="5" menuName="E"
    style="background-color: rgb(0, 255, 200);top:200;">E</div>
  <div class="bar" data-animate-fn="init" data-order="6" menuName='F'
    style="background-color: rgb(255, 238, 0);display:none;">F</div>
  <button id="btn">go</button>

  <script type="text/javascript">
    isOk1 = false;
    isOk2 = false;
    isOk3 = false;
    isOk4 = false;
    isOk5 = false;
    isOk6 = false;



    $('#btn').click(function () {
      // selfCallMethod();
      $('#colorTest').animate({
        'background-color': 'red'
      },2000)
    });

    websocketlist = ['D', 'B', 'C', 'E', 'A', 'F'];

    function selfCallMethod() {
      console.log(isOk1, isOk2, isOk3, isOk4, isOk5);
      /**
       * 1
       */
      if (!isOk1) {
        console.log('1come in')
        var top1Code = websocketlist[0];
        let top1Order = parseInt($('div[menuName="' + top1Code + '"]').attr('data-order'));

        if (1 != top1Order) {
          $('.bar').each((i, bar) => {
            // 当前的序号
            let curOrder = parseInt($(bar).attr('data-order'));

            if (curOrder == top1Order) {
              // 自己执行CSS上移操作
              let top = parseInt($(bar).css('top').replace(/px/g, '')) - 50;
              let order = parseInt($(bar).attr('data-order'));
              if (order > 1) {
                $(bar).animate({
                  'top': top + 'px'
                }, 1000);
              }
            } else if (curOrder == (top1Order - 1)) {
              // 下一个执行上移操作
              $(bar).animate({
                'top': '+50px'
              }, 1000);
            } else {
              // 其他不动
              $(bar).delay(1000)
            }
          })

          // 移动的菜品，重算order
          $('.bar').eq(1).queue((next) => {
            var tmpA = $('div[data-order="' + (top1Order - 1) + '"]');
            var tmpB = $('div[data-order="' + (top1Order) + '"]');

            tmpA.attr('data-order', top1Order);
            tmpB.attr('data-order', top1Order - 1);

            // 如果移动到第一位，则退出
            if ((top1Order - 1) <= 1) {
              isOk1 = true;
            } else {}
            selfCallMethod();
            next();
          });

        } else {
          isOk1 = true;
        }
      }


      /**
       * 2
       */
      if (isOk1 && !isOk2) {
        console.log('2come in')
        var top2Code = websocketlist[1];
        let top2Order = parseInt($('div[menuName="' + top2Code + '"]').attr('data-order'));

        if (2 != top2Order) {
          $('.bar').each((i, bar) => {
            let curOrder = parseInt($(bar).attr('data-order'));
            if (curOrder == top2Order) {
              let top = parseInt($(bar).css('top').replace(/px/g, '')) - 50;
              if (curOrder > 2) {
                $(bar).animate({
                  'top': top + 'px'
                }, 1000);
              }
            } else if (curOrder == (top2Order - 1)) {
              let top = parseInt($(bar).css('top').replace(/px/g, '')) + 50;
              $(bar).animate({
                'top': top + 'px'
              }, 1000);
            } else {
              $(bar).delay(1000);
            }
          });

          $('.bar').eq(1).queue((next) => {
            var tmpA = $('div[data-order="' + (top2Order - 1) + '"]');
            var tmpB = $('div[data-order="' + (top2Order) + '"]');

            tmpA.attr('data-order', top2Order);
            tmpB.attr('data-order', top2Order - 1);

            if ((top2Order - 1) <= 2) {
              isOk2 = true;
            } else {}
            selfCallMethod();
            next();
          });
        } else {
          isOk2 = true;
        }
      }


      /**
       * 3
       */
      if (isOk1 && isOk2 && !isOk3) {
        console.log('3come in')
        var top3Code = websocketlist[2];
        let top3Order = parseInt($('div[menuName="' + top3Code + '"]').attr('data-order'));

        if (3 != top3Order) {
          $('.bar').each((i, bar) => {
            let curOrder = parseInt($(bar).attr('data-order'));
            if (curOrder == top3Order) {
              let top = parseInt($(bar).css('top').replace(/px/g, '')) - 50;
              if (curOrder > 3) {
                $(bar).animate({
                  'top': top + 'px'
                }, 1000);
              }
            } else if (curOrder == (top3Order - 1)) {
              let top = parseInt($(bar).css('top').replace(/px/g, '')) + 50;
              $(bar).animate({
                'top': top + 'px'
              }, 1000);
            } else {
              $(bar).delay(1000);
            }
          });

          $('.bar').eq(1).queue((next) => {
            var tmpA = $('div[data-order="' + (top3Order - 1) + '"]');
            var tmpB = $('div[data-order="' + (top3Order) + '"]');

            tmpA.attr('data-order', top3Order);
            tmpB.attr('data-order', top3Order - 1);

            if ((top3Order - 1) <= 3) {
              isOk3 = true;
            } else {}
            selfCallMethod();
            next();
          });
        } else {
          isOk3 = true;
        }
      }


      /**
       * 4
       */
      if (isOk1 && isOk2 && isOk3 && !isOk4) {
        console.log('4come in')
        var top4Code = websocketlist[3];
        let top4Order = parseInt($('div[menuName="' + top4Code + '"]').attr('data-order'));

        if (4 != top4Order) {
          $('.bar').each((i, bar) => {
            let curOrder = parseInt($(bar).attr('data-order'));
            if (curOrder == top4Order) {
              let top = parseInt($(bar).css('top').replace(/px/g, '')) - 50;
              if (curOrder > 4) {
                $(bar).animate({
                  'top': top + 'px'
                }, 1000);
              }
            } else if (curOrder == (top4Order - 1)) {
              let top = parseInt($(bar).css('top').replace(/px/g, '')) + 50;
              $(bar).animate({
                'top': top + 'px'
              }, 1000);
            } else {
              $(bar).delay(1000);
            }
          });

          $('.bar').eq(1).queue((next) => {
            var tmpA = $('div[data-order="' + (top4Order - 1) + '"]');
            var tmpB = $('div[data-order="' + (top4Order) + '"]');

            tmpA.attr('data-order', top4Order);
            tmpB.attr('data-order', top4Order - 1);

            if ((top4Order - 1) <= 4) {
              isOk4 = true;
            } else {
              selfCallMethod();
              next();
            }

          });
        } else {
          isOk4 = true;
        }
      }

      /**
       * 5
       */
      if (isOk1 && isOk2 && isOk3 && isOk4 && !isOk5) {
        console.log('5come in')
        var top5Code = websocketlist[4];
        let top5Order = parseInt($('div[menuName="' + top5Code + '"]').attr('data-order'));

        if (5 != top5Order) {
          $('.bar').each((i, bar) => {
            let curOrder = parseInt($(bar).attr('data-order'));
            if (curOrder == top5Order) {
              let top = parseInt($(bar).css('top').replace(/px/g, '')) - 50;
              if (curOrder > 5) {
                $(bar).animate({
                  'top': top + 'px'
                }, 1000);
              }
            } else if (curOrder == (top5Order - 1)) {
              let top = parseInt($(bar).css('top').replace(/px/g, '')) + 50;
              $(bar).animate({
                'top': top + 'px'
              }, 1000);
            } else {
              $(bar).delay(1000);
            }
          });

          $('.bar').eq(1).queue((next) => {
            var tmpA = $('div[data-order="' + (top5Order - 1) + '"]');
            var tmpB = $('div[data-order="' + (top5Order) + '"]');

            tmpA.attr('data-order', top5Order);
            tmpB.attr('data-order', top5Order - 1);

            if ((top5Order - 1) <= 5) {
              isOk5 = true;
            } else {
              selfCallMethod();
              next();
            }

          });
        } else {
          isOk5 = true;
        }
      }

      /**
       * 6
       */

    }




    var animateEvent = function () {
      selfCallMethod();
      // }

      // for (let index = 0; index < 2; index++) {

      //   if (index == 0) {
      //     $(".bar").delay(2000);
      //   }
      //   $(".bar").delay(2000);

      //   $(".bar2").animate({
      //     left: "+=200"
      //   }, 2000);

      //   $(".bar3").animate({
      //     left: "+=300"
      //   }, 2000);

      //   if (index == 1) {

      //     $(".bar").queue(function () {
      //       alert("Animation complete.");
      //       $(this).dequeue();
      //     });

      //   }


      // }
      //$(".bar").animate({ left: "+=200" }, 2000 ).animate({ left: "+=200" }, 2000 );
      // console.log($(".bar").queue("fx").length);
    }
    // var doAnimate = function () {
    //   let order = parseInt($('.bar').data('order'));
    //   let animateFn = $('.bar').data('animate-fn');


    //   if (animateFn != 'static') {
    //     console.log(order);
    //     if (order <= 3) {
    //       $('.bar')
    //         .data('animate-fn', 'climb');
    //     } else {
    //       $('.bar')
    //         .data('animate-fn', 'static');
    //     }

    //     $('.bar')
    //       .data('order', order+1)
    //       .animate({
    //         "margin-left": (order * 10) + 'px'
    //       }, 300, function () {
    //         doAnimate();
    //       });
    //   }
    // }


    // var animateEvent = function () {
    //   doAnimate();
    //   // [1,2,3,4,5].forEach((i) => {

    //   // })

    //   // let bar = d3.select('.bar');
    //   // bar.transition().duration(300)
    //   //   .style("margin-left", 20 + 'px').delay(100)
    //   //   .on('end', function () {

    //   //     bar.transition().duration(300)
    //   //       .style("margin-left", 40 + 'px').delay(100)
    //   //       .on('end', function () {

    //   //         bar.transition().duration(300)
    //   //           .style("margin-left", 40 + 'px').delay(100)
    //   //           .on('end', function () {

    //   //             bar.transition().duration(300)
    //   //               .style("background-color", 'green');
    //   //           })
    //   //       })
    //   //     // console.log('transition end');
    //   //   });
    // }
    //新过渡

    // .transition().duration(500).delay(1000) //开启新过渡
    // .attr("r", 5) //设置过渡结束后半径为5
  </script>
</body>

</html>